<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2023-12-21
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>信息通知</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/coupons.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/coupons.js"></script>
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/coupons.css" rel="stylesheet"
          type="text/css"/>
</head>
<body>
<jsp:useBean id="usedCount" scope="request" type="java.lang.Integer"/>
<jsp:useBean id="unusedCount" scope="request" type="java.lang.Integer"/>
<jsp:useBean id="expiredCount" scope="request" type="java.lang.Integer"/>
<jsp:useBean id="id" scope="request" type="java.lang.Integer"/>
<div class="body">
    <div class="personal-information">
        <div class="mi-box">
            <div>
                <div class="box-hd">
                    <h1 class="title">优惠券</h1>
                </div>
                <div class="box-hd">
                    <div class="more">
                        <ul class="filter-list" information-id="${id}" used-count="${usedCount}"
                            unused-count="${unusedCount}" expired-count="${expiredCount}" state="${state}">
                            <li class="unused-li" unused="unused">
                                <a href="javascript:void(0);">未使用</a><span>（${unusedCount}）</span>
                            </li>
                            <li class="used-li" used="used">
                                <a href="javascript:void(0);">已使用</a><span>（${usedCount}）</span>
                            </li>
                            <li class="expired-li" expired="expired">
                                <a href="javascript:void(0);">已失效</a><span>（${expiredCount}）</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="box-bd">
                    <jsp:useBean id="coupons" scope="request" type="java.util.List"/>
                    <ul class="coupon-list">
                        <li class="empty">
                            <p>未找到相应优惠券<br>参加小米社区活动，微博、微信活动即有机会赢优惠券哦~</p>
                            <p>
                                <a href="">小米社区</a>
                                <span class="sep">|</span>
                                <a href="" target="_blank">官方微博</a>
                            </p>
                        </li>
                        <c:forEach var="item" items="${coupons}">
                            <li class="coupon-card coupon-card-discount coupon-card-unused">
                                <div class="coupon-item">
                                    <div class="coupon-header"></div>
                                    <div class="coupon-content">
                                        <div class="item-value">
                                            <span><span class="value">${item.discount}</span>折</span>
                                        </div>
                                        <div class="item-desc">${item.couponTitle}</div>
                                    </div>
                                    <div class="item-description">
                                        <p>适用范围：${item.type.categoryName}</p>
                                    </div>
                                    <div class="coupon-footer">
                                        <div class="coupon-date">
                                            <span>${item.couponValidTime} 到 <br> ${item.couponEndTime} 有效</span>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
